導言

在前一天我們深入探索了 UILabel 的各種設定，今天，我們將進一步擴展視覺設計的範疇。通過學習 addSubview 方法，你將學會如何將多個視圖（圖片、文字、裝飾等）組合在一起，從而為應用程式增添豐富的視覺效果。我們將著重於如何為 ImageView 增加視覺特效，並運用簡單的程式碼來實現動態效果。今天的學習將幫助你創建一個具有設計感和互動性的故事卡片頁面。

學習目標

• 熟悉 addSubview 的使用方法，將多個視圖組合在一起。
• 掌握如何為圖片增加邊框、圓角和陰影等視覺特效。
• 使用 UILabel 添加文字內容並自訂字體、顏色及邊框。
• 使用迴圈與 CGAffineTransform 來為圖像添加隨機旋轉特效。

預覽效果

這是我們今天完成的卡片頁面預覽效果。圖片展示了應用程式中的主要視圖，包括：

• 背景圖片：使用了具有金黃色邊框與圓角的背景圖片，提升了視覺層次感。
• 詩句文字：透過 UILabel 加入詞句，並設置了自訂字體、背景及邊框，讓文字與圖片相得益彰。
• 裝飾葉子：頁面四周圍繞著隨機旋轉的葉子圖像，為整個畫面增添了動態的視覺效果。

這樣的設計結合了多層次的視覺元素，營造出了一個生動且美觀的互動式故事卡片。

開發步驟

Step 1: 準備圖片素材

可以請 AI 幫忙畫張畫，再找個相框的素材圖片

Step 2: 設計主要視圖

首先，選擇一張圖片作為背景，並使用 addSubview 方法疊加邊框與文字。接著，我們會透過為圖片視圖添加邊框、圓角及陰影效果，增強畫面的層次感，使視覺設計更具吸引力。

import UIKit

// 背景圖片與邊框設置
let autumnImageView = UIImageView(image: UIImage(named: "autumn.png"))
let borderImageView = UIImageView(image: UIImage(named: "border.png"))

autumnImageView.frame = CGRect(x: 0, y: 0, width: 800, height: 800)
borderImageView.frame = CGRect(x: 40, y: 40, width: 720, height: 720)

把金黃色邊框圖片，增加邊框與圓角效果，再把二張圖片用 addSubview 組合在一起。

// 增加邊框與圓角效果
autumnImageView.layer.borderWidth = 45
autumnImageView.layer.borderColor = UIColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.5).cgColor
autumnImageView.layer.cornerRadius = 50
autumnImageView.clipsToBounds = true

borderImageView.layer.borderWidth = 5
borderImageView.layer.borderColor = UIColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.9).cgColor
borderImageView.layer.cornerRadius = 20
borderImageView.clipsToBounds = true

// 組合視圖
autumnImageView.addSubview(borderImageView)

圖片變化：

Step 3: 添加詩句文字

接著，我們會透過 UILabel 添加一段詩句，並設置文字的樣式和邊框，讓文字與背景圖片相得益彰。

// 設置詩句
let messageLabel = UILabel(frame: CGRect(x: 80, y: 630, width: 380, height: 88))
messageLabel.text = "空山新雨後，天氣晚來秋。\n明月松間照，清泉石上流。"
messageLabel.textColor = .black
messageLabel.backgroundColor = UIColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.5)
messageLabel.font = UIFont.systemFont(ofSize: 28)
messageLabel.textAlignment = .center
messageLabel.numberOfLines = 2

// 加入邊框與圓角
messageLabel.layer.borderWidth = 3
messageLabel.layer.borderColor = UIColor(red: 191/255, green: 161/255, blue: 0, alpha: 0.9).cgColor
messageLabel.layer.cornerRadius = 30
messageLabel.clipsToBounds = true

autumnImageView.addSubview(messageLabel)

圖片變化：

Step 4: 為視圖添加裝飾效果

最後，我們會使用迴圈在圖片的四周生成旋轉的葉子圖像，並隨機設定旋轉角度，讓畫面更具動感。

let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 800, height: 800))
containerView.addSubview(autumnImageView)

let iconSize = 50
let rowCount = 16
let columnCount = 16

// 將葉子圖片放置在四周
for i in 0..<rowCount {
    for j in 0..<columnCount {
        let isEdge = i == 0 || i == rowCount - 1 || j == 0 || j == columnCount - 1
        if isEdge {
            let leafImageView = UIImageView(image: UIImage(named: "leaf.png"))
            leafImageView.alpha = 0.7
            leafImageView.frame = CGRect(x: iconSize * i, y: iconSize * j, width: iconSize, height: iconSize)
            
            // 隨機旋轉角度
            let randomRotation = CGFloat.random(in: 0...(2 * .pi))
            leafImageView.transform = CGAffineTransform(rotationAngle: randomRotation)

            containerView.addSubview(leafImageView)
        }
    }
}

最後卡片成品圖：：

回顧重點

• 使用 addSubview 組合多個視圖，創建複合 UI。
• 為圖片增加邊框與圓角特效，提升視覺效果。
• 使用 UILabel 加入文字，並透過自訂樣式讓其更具設計感。
• 利用 CGAffineTransform 創建動態旋轉效果，讓畫面更加生動。

總結

今天，我們深入學習了如何使用 addSubview 方法來組合多個視圖，並運用不同的視覺特效讓應用界面更具吸引力。透過 addSubview，我們成功將圖片、文字、邊框和裝飾元素（如隨機旋轉的葉子）整合在一起，創建了一個生動的互動式卡片頁面。

在這個過程中，我們不僅掌握了如何疊加圖片，並透過邊框和圓角的設置增強視覺層次感，還學會了如何利用 UILabel 自訂文字樣式，讓文字內容能夠完美融入背景圖片。透過為每個視圖增加不同的屬性和效果，我們能靈活設計出獨特的介面。

此外，我們還引入了 CGAffineTransform 這個強大的工具，來實現動態視覺效果。藉由隨機旋轉葉子圖像，讓介面變得更富有生命力，打破了靜態視圖的局限性，使頁面更具互動感。

這些視覺特效和組合技術，不僅能提升應用程式的美感，還能為使用者帶來更加沉浸的體驗。未來的應用開發中，你可以運用這些技巧來設計更多複合視圖，無論是故事卡片、互動式介面，還是遊戲場景，這些方法都能幫助你創造出更加豐富的使用者體驗。接下來，我們將繼續探索更多進階的 UI 技巧！

附錄：已接觸的 UIKit 元件

第2周

• UILabel （Day 09）– 顯示文字，設定換行（Line Breaks）、自動縮小字體（Autoshrink）、陰影（Shadow）、強調效果（Highlighted）。
• addSubview （Day 10）– 組合多個視圖來設計複合 UI，並加上圖片邊框、圓角與動態葉子特效。
• CGAffineTransform （Day 10）– 透過旋轉、縮放等變換來增加視圖的動態效果。